<template>
  <div class="bulletin-container">
    <title-bar
    :bar-title="barTitle"
    barStyleName='blue'
    :more-path="morePath"></title-bar>
    <div class="box">
      <div class="left">
        <p>新名单量<span class="spanStyle">(指当月录入系统的名单)</span></p>
        <mt-progress v-if="values.new_custom_count == 0" :value="100" :bar-height="10" class="none-custom"></mt-progress>
        <mt-progress v-else :value="100" :bar-height="10" class="new-custom"></mt-progress>
      </div>
      <div class="middle">
        <p>{{ values.new_custom_count }}人</p>
      </div>
      <div class="right">
        <router-link
          class="crm-title-text more"
          :to="{name: 'new-custom-analyze', query:{team_id: this.id,time: this.time}}">
          <slot name="right">
            <img class="nav-arrow" src="//fin.91mycloud.com/arrow-go-grey.png" />
          </slot>
        </router-link>
      </div>
    </div>

    <div class="box">
      <div class="left">
        <p>已关怀名单</p>
        <mt-progress v-if="values.gh_custom_rate == 0" :value="100" :bar-height="10" class="none-custom"></mt-progress>
        <mt-progress v-else :value="parseInt(values.gh_custom_rate)" :bar-height="10" class="gh-custom"></mt-progress>
      </div>
      <div class="middle">
        <p>{{ values.gh_custom_count }}人</p>
        <p>{{ values.gh_custom_rate }}%</p>
      </div>
      <div class="right">
        <router-link
          class="crm-title-text more"
          :to="{name: 'new-custom-guanhuai-analyze', query:{team_id: this.id,time: this.time}}">
          <slot name="right">
            <img class="nav-arrow" src="//fin.91mycloud.com/arrow-go-grey.png" />
          </slot>
        </router-link>
      </div>

    </div>

    <div class="box">
      <div class="left">
        <p>已到校名单</p>
        <mt-progress v-if="values.gh_custom_rate == 0" :value="100" :bar-height="10" class="none-custom"></mt-progress>
        <mt-progress v-else :value="parseInt(values.df_rate)" :bar-height="10" class="df-custom"></mt-progress>
      </div>
      <div class="middle">
        <p>{{ values.df_custom_count }}人</p>
        <p>{{ values.df_rate }}%</p>
      </div>
      <!--<div class="right">-->
        <!--<router-link-->
          <!--class="crm-title-text more"-->
          <!--:to="to">-->
          <!--<slot name="right">-->
            <!--<img class="nav-arrow" src="//fin.91mycloud.com/arrow-go-grey.png" />-->
          <!--</slot>-->
        <!--</router-link>-->
      <!--</div>-->
    </div>

    <div class="box">
      <div class="left">
        <p>已到校成单<span class="spanStyle">(到校成单率)</span></p>
        <mt-progress v-if="values.gh_custom_rate == 0" :value="100" :bar-height="10" class="none-custom"></mt-progress>
        <mt-progress v-else :value="parseInt(values.order_rate)" :bar-height="10" class="df-custom"></mt-progress>
      </div>
      <div class="middle">
        <p>{{ values.order_custom_count }}人</p>
        <p>{{ values.order_rate }}%</p>
      </div>
      <div class="right">
        <router-link
          class="crm-title-text more"
          :to="{name: 'new-custom-chengjiao-analyze', query:{team_id: this.id,time: this.time}}">
          <slot name="right">
            <img class="nav-arrow" src="//fin.91mycloud.com/arrow-go-grey.png" />
          </slot>
        </router-link>
      </div>

    </div>

  </div>
</template>
<script>
import TitleBar from './title-bar'
import DataGrid from './data-grid'
import { mapState } from 'vuex'
import { Progress } from 'mint-ui'

const MY = 'my'
const TEAM = 'team'
const COMPANY = 'company'

export default {
  props: {
    values: {
      type: Object,
      default: function () {
        return {
          new_custom_count: 0,
          gh_custom_count: 0,
          gh_custom_rate: 0,
          df_custom_count: 0,
          df_rate: 0,
          order_custom_count: 0,
          order_rate: 0
        }
      }
    },
    id: {
      type: String | Number
    },
    type: {
      type: String
    },
    time: {
      type: String | Number
    },
    suid: {
      type: String | Number
    }
  },
  data () {
    return {
      bulletinGridList: [],
      barTitle: '当月新名单',
      morePath: '/',
      newCustomLink: false,
      newSignLink: false,
      to: {}
    }
  },
  watch: {
    link () {
      this.to = this.link
    }
  },
  components: {
    TitleBar,
    DataGrid,
    'mt-progress': Progress
  },
  methods: {
    getTimestamp(dateObject) {
      let currentYear = dateObject.getFullYear()
      let currentMonth = dateObject.getMonth()
      let currentMonthDate = new Date(currentYear, currentMonth)
      return Math.floor(currentMonthDate.getTime() / 1000)
    },
  },
  beforeMount () {
    if (this.link) {
      this.to = this.link
    } else {
      this.to = {path: this.morePath }
    }
  },
  computed: {
    ...mapState({
      user: state => state.app.user
    })
  }
}
</script>
<style lang="less">
.bulletin-container {
  background-color: white;

  .bulletin-body {
    padding: 20px 0 0 15px;
    border-bottom: 1px solid #EDEDED;
  }

  .box {
    width: 100%;
    overflow: hidden;
    color: #8F939A;
    font-size: 14px;
    padding-bottom:10px;
    padding-left: 20px;
    padding-top:10px;
    .left{
      width: 75%;
      float: left;
    }
    .spanStyle{
      color:#d9d9d9;
      margin-left: 5px;
    }

    .middle{
      width:10%;
      float: left;
      text-align: center;
    }

    .right {
      float: right;
      width:auto;
      padding-top:20px;
      padding-right:20px;
    }

    .new-custom{
      .mt-progress-progress {
        background-color: #00AEEE;
        border-radius: 5px;
      }
    }

    .gh-custom{
      .mt-progress-progress {
        background-color: #3cc51f;
        border-radius: 5px;
      }
    }

    .df-custom{
      .mt-progress-progress {
        background-color: #ffbe00;
        border-radius: 5px;
      }
    }

    .order-custom{
      .mt-progress-progress {
        background-color: #f43530;
        border-radius: 5px;
      }
    }

    .none-custom {
      .mt-progress-progress {
        background-color: #cccccc;
        border-radius: 5px;
      }
    }
  }

  .more{
    color: #20a0ff;
    float: right;
    margin-right: 2px;
    padding-right: 10px;
  }

  .crm-title-text{
    height: inherit;
    line-height: 40px;
    padding-left: 6px;
    font-size: 14px;
    font-weight: normal;
  }


}
</style>
